<template>
  <div class="style">
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block">
          <div class="header">
            <h3><van-icon name="cross" class="icon" />输入支付密码</h3>
          </div>
          <div class="payTitle">深圳市腾讯计算机系统有限公司</div>
          <div class="price">￥{{ qqCode }}</div>
          <div class="bankCard">
            <h3>
              <span><img src="@/assets/工商银行.png" alt="" /></span
              >工商银行储蓄卡(6895)
            </h3>
            <van-icon name="arrow" />
          </div>
          <!-- 密码输入框 -->
          <van-password-input
            :value="value"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
          <!-- 数字键盘 -->
          <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      showKeyboard: false,
      value: "",
      qqCode: "",
      qqvalue:''
    };
  },
  methods: {
    cancel() {
      this.$router.push({ name: "Home" });
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        if (this.$route.path == "/pay") {
          this.qqCode = this.$route.query.qqCode;
          this.qqvalue = this.$route.query.qqvalue;
        }
      },
    },
    value(value){
      if(value.length == 6){
         this.$router.push({ path: "/payFinsh", query: { qqCode: this.qqCode ,qqvalue:this.qqvalue}, });
      }
    }
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 297px;
  height: 250px;
  background-color: #fff;
  .header {
    border-bottom: 1px solid #807b7b;
    h3 {
      .icon {
        margin: 0 16px;
      }
      color: #807b7b;
      font-size: 16px;
    }
  }
  .payTitle {
    width: 100%;
    height: 30px;
    color: #807b7b;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
  }
  .price {
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .bankCard {
    display: flex;
    justify-content: space-between;
    height: 60px;
    padding: 0 15px;
    color: #807b7b;
    font-size: 14px;
    align-items: center;
    h3 {
      span {
        vertical-align: middle;
        padding-right: 6px;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
/* .style {
  background-color: #79797C;
  width: 100%;
  height: 100%;
}
.container-box {
  width: 389px;
  height: 281px;
  background-color: #fff;
} */
/* .payTitle {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
} */
</style>